<template>
	<view style="width: 100%; height: 100%;">
		<view style="width: 100%; height: 100%;">
			<view style="width: 100%;height: 450rpx;">
				<image src="../../static/beijing.png" style="width: 100%;height: 100%;" mode="aspectFill"></image>
			</view>
			<view style="width: 650rpx; margin: auto;">
				<!-- <open-data type="userAvatarUrl" mode="aspectFill"></open-data> -->
				<view style="position: relative; width: 150rpx;">
					<image :src="avatarpath" @click="showBigImg(avatarpath)" mode="aspectFill" 
					style="width: 120rpx; height: 120rpx;
					 border-radius: 50%; overflow: hidden; margin-top: -75rpx;"></image>
					 <view style="text-align: center; margin-top: -40rpx;margin-right: 30rpx;">
						 <uni-icons type="camera-filled" size="28" color="#40A9FF" @click.stop="changeAvatar"></uni-icons>
					 </view>
					 <canvas canvas-id="canvas" :style="{width:cWidth+'px',height:cHeight+'px',position:'absolute',left:'-1000px',top:'-1000px'}"></canvas>
				</view>
				<view style="font-size: 26rpx;">
					<view style="font-weight: 600;">
						{{user.name || ''}}
						<text style="color: #796AD2; margin-left: 8rpx;">{{user.phone || ''}}</text>
					</view>
					<view style="font-size: 22rpx; color: #666666; margin-top: 8rpx;">
					{{user.laborName || ''}}
						<text style="background: #DCD7F7; padding:10rpx 18rpx; color: #5243B0; 
						border-radius: 30rpx; font-size: 20rpx; margin-left: 8rpx;">
						{{user.userType == 1 ? "自有员工":"劳务员工"}}</text>
					</view>
				</view>
				
				<view style="margin-top: 60rpx;">
					<view style="display: flex; align-items: center; padding: 20rpx 0;
					border-bottom: 1rpx solid #ddd;" @click="instructions()">
						<view style="background: #FBD7F0; border-radius: 20rpx; width: 80rpx; height: 80rpx;
						display: flex; align-items: center; justify-content: center; margin-right: 8rpx;">
							<uni-icons type="help-filled" size="32" color="#F95A90"></uni-icons>
						</view>
						<view style="margin-left: 8rpx;">使用说明</view>
						<uni-icons type="right" size="14" color="#999999" style="margin-left: auto;"></uni-icons>
					</view>
					<view style="display: flex; align-items: center; padding: 20rpx 0;
					border-bottom: 1rpx solid #ddd;" @click="setPassword()">
						<view style="background: #E6FFFB; border-radius: 20rpx; width: 80rpx; height: 80rpx;
						display: flex; align-items: center; justify-content: center; margin-right: 8rpx;">
							<uni-icons type="calendar-filled" size="32" color="#13C2C2"></uni-icons>
						</view>
						<view style="margin-left: 8rpx;">密码设置</view>
						<uni-icons type="right" size="14" color="#999999" style="margin-left: auto;"></uni-icons>
					</view>
					<!-- <view style="display: flex; align-items: center; padding: 20rpx 0;
					border-bottom: 1rpx solid #ddd;" @click="share_qrcode()">
						<view style="background: #DCD7F7; border-radius: 20rpx; width: 80rpx; height: 80rpx;
						display: flex; align-items: center; justify-content: center; margin-right: 8rpx;">
							<uni-icons type="image-filled" size="32" color="#796AD2"></uni-icons>
					    </view>
						<view style="margin-left: 8rpx;">生成海报</view>
						<uni-icons type="right" size="14" color="#999999" style="margin-left: auto;"></uni-icons>
					</view> -->
					<view style="display: flex; align-items: center; padding: 20rpx 0;
					border-bottom: 1rpx solid #ddd;" @click="myBank()">
						<view style="background: #E6F7FF; border-radius: 20rpx; width: 80rpx; height: 80rpx;
						display: flex; align-items: center; justify-content: center; margin-right: 8rpx;">
							<uni-icons type="wallet-filled" size="32" color="#27ffbe"></uni-icons>
						</view>
						<view style="margin-left: 8rpx;">我的账户</view>
						<uni-icons type="right" size="14" color="#999999" style="margin-left: auto;"></uni-icons>
					</view>
					<view style="display: flex; align-items: center; padding: 20rpx 0;
					border-bottom: 1rpx solid #ddd;" @click="quit()">
						<view style="background: #E6F7FF; border-radius: 20rpx; width: 80rpx; height: 80rpx;
						display: flex; align-items: center; justify-content: center; margin-right: 8rpx;">
							<uni-icons type="info-filled" size="32" color="#40A9FF"></uni-icons>
						</view>
						<view style="margin-left: 8rpx;">退出登录</view>
						<uni-icons type="right" size="14" color="#999999" style="margin-left: auto;"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<!-- 海报 -->
		<view @click="share_qrcode()" style="position: fixed; right: 0; top: 475rpx;width: 190rpx;height: 55rpx;
		display: flex;background-image: linear-gradient(120deg, #9890e3 0%, #66a6ff 100%); align-items: center;justify-content: center;border-radius: 30rpx 0 0 30rpx;">
			<uni-icons type="image-filled"  size="26" color="#ffffff"></uni-icons>
			<view style="text-align: right;color: #FFFFFF;text-align: center;">生成海报</view>
		</view>
		<!-- <XQ-GeneratePoster ref="draw" /> -->
		<!-- 底部分享弹窗 - 弹框显示-->
		<uni-popup ref="showshare" :type="'center'" @change="posterChange">
			<view class="uni-share">
				<view style="width: 600upx; height: 820upx;border-radius: 20upx;background-color: #FFFFFF;">
					<image @longpress="showSaveImgWinTo()" :src="posterUrl" style="width: 100%;height: 100%;border-radius: 20upx;"></image>
				</view>
			</view>
		</uni-popup>
		<foot action="2"></foot>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import foot from '@/components/foot.vue';
	import Env from '@/util/Env.js';
	import XqGeneratePoster from '@/uni_modules/XQ-GeneratePoster/components/XQ-GeneratePoster/XQ-GeneratePoster.vue';
	export default {
		components: {
			foot,
			XqGeneratePoster,
			uniPopup
		},
		data() {
			return {
				cWidth:0,
				cHeight:0,
				// /common/upload 通用上传图片接口
				user:this.$method.getStorageTo('system'),
				avatarpath:this.$Env.getDevBaseURL() + this.$method.getStorageTo('system').avatarpath,
				posterUrl:this.$Env.getDevBaseURL() + '/profile/upload/2022/08/26/huntaway-poster_20220826151216A690.jpg'
			}
		},
		methods: {
			// 生成海报
		   share_qrcode() {
				// this.$refs.draw.share_qrcode(this.option);
				this.$nextTick(() => {
					this.$refs.showshare.open()
				})
			},
			posterChange(){},
			// 长按保存海报
			showSaveImgWinTo(){
				var that = this
				uni.showModal({
					title: '温馨提示',
					content: '确定要保存图片吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.saveShareImg(that.posterUrl)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 保存到系统相册
			saveShareImg(posterUrl) {
				wx.downloadFile({
				  url: posterUrl,
				  success(res) {
					// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
					console.log('downloadFileres', res);
					wx.saveImageToPhotosAlbum({
					  filePath: res.tempFilePath,
					  success(res) {
						console.log("保存图片：success");
						wx.showToast({
					  title: '保存成功',
						});
					  },
					  fail: res => {
						console.log(res);
						wx.showToast({
						  title: '保存失败',
						});
					  }
					})
				  }
				})
			},
			
			//点击切换头像
			changeAvatar(){
				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera', 'album'], //camera 相机拍摄 album从相册选择
					success: function(res) {
						uni.showLoading({title:"上传中...",mask:true})
						console.log(res)
						that.compressImage(res.tempFilePaths[0])
					}
					});
			},
			
          // 图片压缩
			compressImage(src) {
				let that = this
				uni.getImageInfo({
					src:src,
					success: function(res) {
						console.log(res.width);
						console.log(res.height);
						var ratio = 2;
						var canvasWidth = res.width //图片原始长宽
						var canvasHeight = res.height
						while (canvasWidth > 400 || canvasHeight > 400) { // 保证宽高在400以内
							canvasWidth = Math.trunc(res.width / ratio)
							canvasHeight = Math.trunc(res.height / ratio)
							ratio++;
						}
						that.cWidth = canvasWidth
						that.cHeight = canvasHeight
						var ctx = uni.createCanvasContext('canvas')
			
						ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)
			
						ctx.draw(false, setTimeout(() => {
							uni.canvasToTempFilePath({
								canvasId: 'canvas',
								destWidth: canvasWidth,
								destHeight: canvasHeight,
								fileType: 'jpg',
								quality: 0.4,
								success: function(res1) {
									uni.getFileInfo({
										filePath: res1.tempFilePath,
										success(ress) {
											// 上传图片
											wx.uploadFile({
												 //请求后台的路径
												url: Env.getDevBaseURL() + '/uploadFaceIdcardPath/uploadFace',
												//小程序本地的路径
												filePath: res1.tempFilePath,
												header: {
													'Authorization':"Bearer "+ uni.getStorageSync("token"),
													'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
												},
												//后台获取我们图片的key
												name: 'file',
												//额外的参数formData
												formData: {
													Authorization:"Bearer "+ uni.getStorageSync("token")
												},
												success: function (res) {
													if(JSON.parse(res.data).code == 200){
														uni.hideLoading()
														that.faceSubmission(JSON.parse(res.data).fileName)
													}else{
														uni.hideLoading()
														console.log('00000000000')
														console.log(JSON.parse(res.data).msg)
														uni.showToast({ title: JSON.parse(res.data).msg, icon: 'none',duration:2000});
													}
												},
												fail: function (err) {
													console.log(err)
													uni.hideLoading()
													uni.showToast({ title: "网络超时!", icon: 'none' });
												},
											})
											
										}
									})
			                     
								},
								fail: function(res) {
									console.log(res.errMsg)
								}
							})
						}, 100)) //留一定的时间绘制canvas
					},
					fail(err) {
						console.log(err.errMsg)
					}
				})
			},			
			
			//提交
			faceSubmission(img){
				// uni.showLoading({title:"上传中...",mask:true})
				// 提交接口
				this.$http.post('/uploadFaceIdcardPath/uploadFacePath',
				{
					"positivePath":"",
					"backPath":"", 
					"facePath":img, 
					"name": "",
					"idCard":"",
				},true).then(res => {
					// uni.hideLoading()
					uni.showToast({ title:res.msg, icon: 'none',duration:2000});
					// 本地储存个人信息
					this.$http.get('/system/user/profile',{},true).then(result => {
						this.$method.setStorageTo("system",result.data)
						this.avatarpath = this.$Env.getDevBaseURL() + this.$method.getStorageTo('system').avatarpath
					}).catch(err => {
						uni.showToast({ title: err.msg, icon: 'none' });
					})
				}).catch(err => {
					// uni.hideLoading()
					uni.showToast({ title: err.msg, icon: 'none' });
				})
			},
			
			//点击放大图片
			showBigImg(ite){
			  let arr=[];
			  arr.push(ite)
			  console.log(arr,'图片的地址')
			  uni.previewImage({
				   current: 0,
				   urls: arr //必须是网址路径，否则加载不出来，如：http：或https：
			  });
			},
			instructions(){
				// uni.showModal({
				// 	title: '功能待上线',
				// 	content: '请耐心等待...',
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			console.log('用户点击确定');
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 		}
				// 	}
				// });
				uni.navigateTo({
					url:"./instructions"
				})
				
			},
			setPassword(){
				uni.navigateTo({
					url:"./setPassword"
				})
			},
			myBank(){
				uni.navigateTo({
					url:"./myBank"
				})
			},
			quit(){
				var that = this
				uni.showModal({
					title: '温馨提示',
					content: '是否确定退出登录？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.logout()
							// uni.reLaunch({
							// 	url:'../index/login'
							// })
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			logout(){
				uni.showLoading({
					title:'正在退出登录'
				})
				this.$http.get('/logout',{},true).then(res =>{
					console.log(res)
					if(res.code == 200){
						uni.clearStorageSync();
						uni.reLaunch({
							url:'../index/login'
						})
					}else{
						uni.showToast({ title: res.msg, icon: 'none' });
					}
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({ title: err.msg, icon: 'none' });
				})
			},
		},
		onShow() {
			console.log(this.$method.getStorageTo('system'))
		}
	}
</script>

<style lang="scss">
page {
		width: 100%;
		margin: 0;
		padding: 0;
		background: #fff !important;
	}
</style>
